<!DOCTYPE html>
<html>
  <head>
     
    <meta charset="UTF-8">
    <title>Apex直传阿里云OSS - 我的元宇宙</title>
    <link rel="shortcut icon" href="/static/img/icon.png">
    <link rel="icon" href="/static/img/icon.png" sizes="192x192"/>
    
<link rel="stylesheet" href="/static/kico.css">
<link rel="stylesheet" href="/static/hingle.css">

    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
    <meta property="og:site_name" content="我的元宇宙">
    <meta property="og:title" content="Apex直传阿里云OSS"/>
    
 
<meta name="generator" content="Hexo 5.4.0"></head>

  <body>
    <header>
    <div class="head-title">
        <h4>我的元宇宙</h4>
    </div>
    <div class="head-action">
        <div class="toggle-btn"></div>
        <div class="light-btn"></div>
        <div class="search-btn"></div>
    </div>
    <form class="head-search" method="post">
        <input type="text" name="s" placeholder="搜索什么？">
    </form>
    <nav class="head-menu">
        <a href="/">首页</a>
        <div class="has-child">
            <a>分类</a>
            <div class="sub-menu">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a><a class="category-link" href="/categories/%E6%9D%82%E9%A1%B9/">杂项</a><a class="category-link" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a><a class="category-link" href="/categories/%E8%BD%AC%E8%BD%BD/">转载</a>
            </div>
        </div>
        
            <a href="/about">关于我</a>
        
    </nav>
</header>

    <main>
    <div class="wrap min">
        <section class="post-title">
            <h2>Apex直传阿里云OSS</h2>
            <div class="post-meta">
                <time class="date">2022.01.13</time>
            
                <span class="category"><a class="category-link" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a>，<a class="category-link" href="/categories/%E7%AC%94%E8%AE%B0/Oracle/">Oracle</a>，<a class="category-link" href="/categories/%E7%AC%94%E8%AE%B0/Oracle/Apex/">Apex</a></span>
            
            </div>
        </section>
        <article class="post-content">
        
            <h1 id="Apex直传阿里云OSS"><a href="#Apex直传阿里云OSS" class="headerlink" title="Apex直传阿里云OSS"></a>Apex直传阿里云OSS</h1><h2 id="0-从阿里云下载demo"><a href="#0-从阿里云下载demo" class="headerlink" title="0.从阿里云下载demo"></a>0.从阿里云下载demo</h2><p><a target="_blank" rel="noopener" href="https://help.aliyun.com/document_detail/31926.htm?spm=a2c4g.11186623.0.0.26885d3ffBwwxP#concept-en4-sjy-5db">阿里云OSS最佳实践 DOC</a><br><img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/EE3zkKRQBPQ6TmZtP66p.png/jbfffurvdqmpvhukbzbsea"></p>
<h2 id="1-前端部分"><a href="#1-前端部分" class="headerlink" title="1.前端部分"></a>1.前端部分</h2><ol>
<li><p>加载需要的JS包<br> 从阿里的demo中找到这个两个JS包上传到Apex的静态文件中</p>
<p> <img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/NjEb36GkGHQdfW6PRPy3.png/jbfffurvdqmpvhukbzbsea"></p>
</li>
<li><p>将下方的JS放置在上图的框框中</p>
<p> 需要注意<code>apex.server.process(&quot;TO_ME_OSS&quot;</code> 这里</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br></pre></td><td class="code"><pre><span class="line">accessid = <span class="string">&#x27;&#x27;</span></span><br><span class="line">accesskey = <span class="string">&#x27;&#x27;</span></span><br><span class="line">host = <span class="string">&#x27;&#x27;</span></span><br><span class="line">policyBase64 = <span class="string">&#x27;&#x27;</span></span><br><span class="line">signature = <span class="string">&#x27;&#x27;</span></span><br><span class="line"><span class="comment">// callbackbody = &#x27;&#x27;</span></span><br><span class="line">filename = <span class="string">&#x27;&#x27;</span></span><br><span class="line">key = <span class="string">&#x27;&#x27;</span></span><br><span class="line">expire = <span class="number">0</span></span><br><span class="line">g_object_name = <span class="string">&#x27;&#x27;</span></span><br><span class="line">g_object_name_type = <span class="string">&#x27;&#x27;</span></span><br><span class="line">now = timestamp = <span class="built_in">Date</span>.parse(<span class="keyword">new</span> <span class="built_in">Date</span>()) / <span class="number">1000</span>;</span><br><span class="line">is_using_oss = <span class="literal">false</span></span><br><span class="line">new_multipart_params = <span class="string">&#x27;&#x27;</span></span><br><span class="line">hash_filename = <span class="string">&#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">random_string</span>(<span class="params">len</span>) </span>&#123;</span><br><span class="line">    len = len || <span class="number">32</span>;</span><br><span class="line">    <span class="keyword">var</span> chars = <span class="string">&#x27;ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678&#x27;</span>;</span><br><span class="line">    <span class="keyword">var</span> maxPos = chars.length;</span><br><span class="line">    <span class="keyword">var</span> pwd = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        pwd += chars.charAt(<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * maxPos));</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> pwd;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">get_suffix</span>(<span class="params">filename</span>) </span>&#123;</span><br><span class="line">    pos = filename.lastIndexOf(<span class="string">&#x27;.&#x27;</span>)</span><br><span class="line">    suffix = <span class="string">&#x27;&#x27;</span></span><br><span class="line">    <span class="keyword">if</span> (pos != -<span class="number">1</span>) &#123;</span><br><span class="line">        suffix = filename.substring(pos)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> suffix;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">get_signature</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 可以判断当前expire是否超过了当前时间， 如果超过了当前时间， 就重新取一下，3s 作为缓冲。</span></span><br><span class="line">    now = timestamp = <span class="built_in">Date</span>.parse(<span class="keyword">new</span> <span class="built_in">Date</span>()) / <span class="number">1000</span>;</span><br><span class="line">    <span class="keyword">if</span> (expire &lt; now + <span class="number">3</span>) &#123;</span><br><span class="line">        apex.server.process(<span class="string">&quot;TO_ME_OSS&quot;</span>, &#123;&#125;, &#123;</span><br><span class="line">            <span class="attr">async</span>: <span class="literal">false</span>,</span><br><span class="line">            <span class="attr">success</span>: <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">                host = data.host</span><br><span class="line">                policyBase64 = data.policy</span><br><span class="line">                accessid = data.accessid</span><br><span class="line">                signature = data.signature</span><br><span class="line">                expire = <span class="built_in">parseInt</span>(data.expire)</span><br><span class="line">                <span class="comment">//   callbackbody = data.callback</span></span><br><span class="line">                key = data.dir</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">set_upload_param</span>(<span class="params">up, filename, ret</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (ret == <span class="literal">false</span>) &#123;</span><br><span class="line">        ret = get_signature()</span><br><span class="line">    &#125;</span><br><span class="line">    g_object_name = key;</span><br><span class="line">    <span class="keyword">if</span> (filename != <span class="string">&#x27;&#x27;</span>) &#123;</span><br><span class="line">        <span class="comment">// todo 后台可以check下图片是否已经上传过了 存表 依据原有文件名 </span></span><br><span class="line">        suffix = get_suffix(filename) <span class="comment">// 获取后缀</span></span><br><span class="line">        <span class="keyword">var</span> random_file_name = random_string(<span class="number">20</span>);</span><br><span class="line">        g_object_name = key + random_file_name + suffix;</span><br><span class="line">        hash_filename = random_file_name + suffix;</span><br><span class="line">    &#125;</span><br><span class="line">    new_multipart_params = &#123;</span><br><span class="line">        <span class="string">&#x27;key&#x27;</span>: g_object_name,</span><br><span class="line">        <span class="string">&#x27;policy&#x27;</span>: policyBase64,</span><br><span class="line">        <span class="string">&#x27;OSSAccessKeyId&#x27;</span>: accessid,</span><br><span class="line">        <span class="string">&#x27;success_action_status&#x27;</span>: <span class="string">&#x27;200&#x27;</span>, <span class="comment">//让服务端返回200,不然，默认会返回204</span></span><br><span class="line">        <span class="comment">// &#x27;callback&#x27;: callbackbody,</span></span><br><span class="line">        <span class="string">&#x27;signature&#x27;</span>: signature,</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    up.setOption(&#123;</span><br><span class="line">        <span class="string">&#x27;url&#x27;</span>: host,</span><br><span class="line">        <span class="string">&#x27;multipart_params&#x27;</span>: new_multipart_params</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    up.start();</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> uploader = <span class="keyword">new</span> plupload.Uploader(&#123;</span><br><span class="line">    <span class="attr">runtimes</span>: <span class="string">&#x27;html5,html4&#x27;</span>,</span><br><span class="line">    <span class="comment">//    runtimes: &#x27;html5,flash,silverlight,html4&#x27;,</span></span><br><span class="line">    <span class="attr">browse_button</span>: <span class="string">&#x27;selectfiles&#x27;</span>,</span><br><span class="line">    <span class="attr">multi_selection</span>: <span class="literal">false</span>, <span class="comment">//是否允许多选</span></span><br><span class="line">    <span class="attr">container</span>: <span class="built_in">document</span>.getElementById(<span class="string">&#x27;container&#x27;</span>),</span><br><span class="line">    <span class="comment">//  flash_swf_url: &#x27;#APP_IMAGES#Moxie.swf&#x27;,</span></span><br><span class="line">    <span class="comment">// silverlight_xap_url: &#x27;#APP_IMAGES#Moxie.xap&#x27;,</span></span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://oss.aliyuncs.com&#x27;</span>,</span><br><span class="line">    <span class="attr">filters</span>: &#123;</span><br><span class="line">        <span class="attr">mime_types</span>: [ <span class="comment">//只允许上传图片和zip文件</span></span><br><span class="line">            &#123; <span class="attr">title</span>: <span class="string">&quot;Image files&quot;</span>, <span class="attr">extensions</span>: <span class="string">&quot;jpg,gif,png,bmp&quot;</span> &#125;,</span><br><span class="line">            <span class="comment">//  &#123; title: &quot;Zip files&quot;, extensions: &quot;zip,rar&quot; &#125;</span></span><br><span class="line">        ],</span><br><span class="line">        <span class="attr">max_file_size</span>: <span class="string">&#x27;10mb&#x27;</span>, <span class="comment">//最大只能上传10mb的文件</span></span><br><span class="line">        <span class="attr">prevent_duplicates</span>: <span class="literal">true</span> <span class="comment">//不允许选取重复文件</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">init</span>: &#123;</span><br><span class="line">        <span class="comment">//  https://blog.csdn.net/sunwork888/article/details/100976725</span></span><br><span class="line">        <span class="attr">PostInit</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">//   document.getElementById(&#x27;ossfile&#x27;).innerHTML = &#x27;&#x27;;</span></span><br><span class="line">            <span class="built_in">document</span>.getElementById(<span class="string">&#x27;postfiles&#x27;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                <span class="comment">// todo 检查下客户端OSS是否用</span></span><br><span class="line">                set_upload_param(uploader, <span class="string">&#x27;&#x27;</span>, <span class="literal">false</span>);</span><br><span class="line">                <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="attr">FilesAdded</span>: <span class="function"><span class="keyword">function</span> (<span class="params">up, files</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;------&#x27;</span>);</span><br><span class="line">            <span class="built_in">console</span>.log(files);</span><br><span class="line">            plupload.each(files, <span class="function"><span class="keyword">function</span> (<span class="params">file</span>) </span>&#123;</span><br><span class="line">                <span class="built_in">document</span>.getElementById(<span class="string">&#x27;ossfile&#x27;</span>).innerHTML += <span class="string">&#x27;&lt;div id=&quot;&#x27;</span> + file.id + <span class="string">&#x27;&quot;&gt;&#x27;</span> + file.name + <span class="string">&#x27; (&#x27;</span> + plupload.formatSize(file.size) + <span class="string">&#x27;)&lt;b&gt;&lt;/b&gt;&#x27;</span></span><br><span class="line">                    + <span class="string">&#x27;&lt;div class=&quot;progress&quot;&gt;&lt;div class=&quot;progress-bar&quot; style=&quot;width: 0%&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;</span></span><br><span class="line">                    + <span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="attr">BeforeUpload</span>: <span class="function"><span class="keyword">function</span> (<span class="params">up, file</span>) </span>&#123;</span><br><span class="line">            <span class="comment">//  check_object_radio(); // 重命名</span></span><br><span class="line"></span><br><span class="line">            set_upload_param(up, file.name, <span class="literal">true</span>);</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="attr">UploadProgress</span>: <span class="function"><span class="keyword">function</span> (<span class="params">up, file</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> d = <span class="built_in">document</span>.getElementById(file.id);</span><br><span class="line">            d.getElementsByTagName(<span class="string">&#x27;b&#x27;</span>)[<span class="number">0</span>].innerHTML = <span class="string">&#x27;&lt;span&gt;&#x27;</span> + file.percent + <span class="string">&quot;%&lt;/span&gt;&quot;</span> + <span class="string">&quot;&lt;span&gt;&quot;</span> + host + <span class="string">&quot;/&quot;</span> + g_object_name + <span class="string">&quot;&lt;/span&gt;&quot;</span>;</span><br><span class="line">            <span class="keyword">var</span> prog = d.getElementsByTagName(<span class="string">&#x27;div&#x27;</span>)[<span class="number">0</span>];</span><br><span class="line">            <span class="keyword">var</span> progBar = prog.getElementsByTagName(<span class="string">&#x27;div&#x27;</span>)[<span class="number">0</span>]</span><br><span class="line">            progBar.style.width = <span class="number">2</span> * file.percent + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">            progBar.setAttribute(<span class="string">&#x27;aria-valuenow&#x27;</span>, file.percent);</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="attr">FileUploaded</span>: <span class="function"><span class="keyword">function</span> (<span class="params">up, file, info</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (info.status == <span class="number">200</span>) &#123;</span><br><span class="line">                apex.server.process(<span class="string">&quot;SAVE_FILE_NAME&quot;</span>, &#123;</span><br><span class="line">                    <span class="attr">x01</span>: file.name,</span><br><span class="line">                    <span class="attr">x02</span>: g_object_name,</span><br><span class="line">                    <span class="attr">x03</span>: host</span><br><span class="line">                &#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">                apex.message.showPageSuccess(<span class="string">&quot;Upload to OSS success!&quot;</span>);</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (info.status == <span class="number">203</span>) &#123;</span><br><span class="line">                <span class="built_in">console</span>.log(info.response);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="attr">Error</span>: <span class="function"><span class="keyword">function</span> (<span class="params">up, err</span>) </span>&#123;</span><br><span class="line">            apex.message.clearErrors();</span><br><span class="line">            <span class="keyword">if</span> (err.code == -<span class="number">600</span>) &#123;</span><br><span class="line">                apex.message.showErrors([</span><br><span class="line">                    &#123;</span><br><span class="line">                        <span class="attr">type</span>: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">                        <span class="attr">location</span>: <span class="string">&quot;page&quot;</span>,</span><br><span class="line">                        <span class="attr">message</span>: <span class="string">&quot;选择的文件太大了!&quot;</span>,</span><br><span class="line">                        <span class="attr">unsafe</span>: <span class="literal">false</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]);</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (err.code == -<span class="number">601</span>) &#123;</span><br><span class="line">                apex.message.showErrors([</span><br><span class="line">                    &#123;</span><br><span class="line">                        <span class="attr">type</span>: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">                        <span class="attr">location</span>: <span class="string">&quot;page&quot;</span>,</span><br><span class="line">                        <span class="attr">message</span>: <span class="string">&quot;请选择图片!&quot;</span>,</span><br><span class="line">                        <span class="attr">unsafe</span>: <span class="literal">false</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]);</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (err.code == -<span class="number">602</span>) &#123;</span><br><span class="line">                apex.message.showErrors([</span><br><span class="line">                    &#123;</span><br><span class="line">                        <span class="attr">type</span>: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">                        <span class="attr">location</span>: <span class="string">&quot;page&quot;</span>,</span><br><span class="line">                        <span class="attr">message</span>: <span class="string">&quot;这个文件已经上传过一遍了!&quot;</span>,</span><br><span class="line">                        <span class="attr">unsafe</span>: <span class="literal">false</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                apex.message.showErrors([</span><br><span class="line">                    &#123;</span><br><span class="line">                        <span class="attr">type</span>: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">                        <span class="attr">location</span>: <span class="string">&quot;page&quot;</span>,</span><br><span class="line">                        <span class="attr">message</span>: <span class="string">&quot;抱歉上传失败&quot;</span> + err.response,<span class="comment">//有可能 客户端 网络无法访问oss</span></span><br><span class="line">                        <span class="attr">unsafe</span>: <span class="literal">false</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line">uploader.init();</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li><p>创建一些区域和按钮</p>
</li>
</ol>
<p><img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/Fk8nDGHMNXsWFMzZt8z6.png/jbfffurvdqmpvhukbzbsea"></p>
<p><img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/cwS5WRjrtts2fDMiiPts.png/jbfffurvdqmpvhukbzbsea"></p>
<p><img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/yTPsneMwEQiaekWkDPxx.png/jbfffurvdqmpvhukbzbsea"></p>
<p><img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/F27MMMtrCbFJa5ajSttw.png/jbfffurvdqmpvhukbzbsea"></p>
<pre><code>PS:
此处可定制一些操作,比如记录下上传的记录
</code></pre>
<p><img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/NHhKbfEc3PG4J5FGwQAe.png/jbfffurvdqmpvhukbzbsea"></p>
<h2 id="2-后端部分"><a href="#2-后端部分" class="headerlink" title="2.后端部分"></a>2.后端部分</h2><ol>
<li><p>后端ajax 生成签名</p>
<p> 在全局的处理里新建一个ajax回调用于生成签名<br> <img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/GXefHC47zczCApXPJ5mS.png/jbfffurvdqmpvhukbzbsea"><br> code如下是仿写阿里云demo的python部分.大家可自行下载其他demo 验证.</p>
 <figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span></span><br><span class="line"><span class="comment">-- # 请填写您的AccessKeyId。</span></span><br><span class="line">    l_access_key_id     varchar2(<span class="number">50</span>)   :<span class="operator">=</span> :ME_ACCESS_KEY_ID;</span><br><span class="line"><span class="comment">-- # 请填写您的AccessKeySecret。</span></span><br><span class="line">    l_access_key_secret varchar2(<span class="number">50</span>)   :<span class="operator">=</span> :ME_ACCESS_KEY_SECRET;</span><br><span class="line"><span class="comment">-- # host的格式为 bucketname.endpoint ，请替换为您的真实信息。</span></span><br><span class="line"><span class="comment">--  l_host              varchar2(1000) := &#x27;https://panosstest1111.oss-cn-beijing.aliyuncs.com&#x27;;</span></span><br><span class="line">        l_host              varchar2(<span class="number">1000</span>) :<span class="operator">=</span> :ME_HOST;</span><br><span class="line"></span><br><span class="line"><span class="comment">-- # callback_url为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。</span></span><br><span class="line">    l_callback_url      varchar2(<span class="number">1000</span>) :<span class="operator">=</span> <span class="string">&#x27;http://88.88.88.88:8888&#x27;</span>;</span><br><span class="line"><span class="comment">-- # 用户上传文件时指定的前缀。</span></span><br><span class="line"><span class="comment">--    l_upload_dir        varchar2(1000) := &#x27;aaaaaa/&#x27;;</span></span><br><span class="line">        l_upload_dir        varchar2(<span class="number">1000</span>) :<span class="operator">=</span> :ME_DIR;</span><br><span class="line">    expiration          varchar2(<span class="number">50</span>);</span><br><span class="line">    expire              varchar2(<span class="number">50</span>);</span><br><span class="line">    policy_encode       RAW(<span class="number">2000</span>);</span><br><span class="line">    l_mac_secret        RAW(<span class="number">2000</span>);</span><br><span class="line">    l_clob              <span class="type">clob</span>;</span><br><span class="line">    policy_vc           varchar2(<span class="number">2000</span>);</span><br><span class="line">    sign_result_vc      varchar2(<span class="number">1000</span>);</span><br><span class="line">    l_callback_body_vc  varchar2(<span class="number">4000</span>);</span><br><span class="line"><span class="keyword">begin</span></span><br><span class="line">    <span class="comment">-- https://stackoverflow.com/questions/1749753/making-a-sha1-hash-of-a-row-in-oracle</span></span><br><span class="line"><span class="comment">-- https://docs.oracle.com/cd/B19306_01/appdev.102/b14258/d_crypto.htm#i1000594</span></span><br><span class="line"><span class="comment">--     赋权</span></span><br><span class="line"><span class="comment">-- GRANT EXECUTE ON SYS.DBMS_CRYPTO TO apex_dev;</span></span><br><span class="line">    <span class="keyword">begin</span></span><br><span class="line">        <span class="keyword">select</span> trunc(<span class="built_in">extract</span>(<span class="keyword">day</span> <span class="keyword">from</span> intvl) <span class="operator">*</span> <span class="number">24</span> <span class="operator">*</span> <span class="number">60</span> <span class="operator">*</span> <span class="number">60</span></span><br><span class="line">            <span class="operator">+</span> <span class="built_in">extract</span>(<span class="keyword">hour</span> <span class="keyword">from</span> intvl) <span class="operator">*</span> <span class="number">60</span> <span class="operator">*</span> <span class="number">60</span></span><br><span class="line">            <span class="operator">+</span> <span class="built_in">extract</span>(<span class="keyword">minute</span> <span class="keyword">from</span> intvl) <span class="operator">*</span> <span class="number">60</span></span><br><span class="line">            <span class="operator">+</span> <span class="built_in">extract</span>(<span class="keyword">second</span> <span class="keyword">from</span> intvl)</span><br><span class="line">                )</span><br><span class="line">        <span class="keyword">into</span> expire</span><br><span class="line">        <span class="keyword">from</span> (<span class="keyword">select</span> (<span class="built_in">CURRENT_TIMESTAMP</span> <span class="operator">+</span> <span class="type">interval</span> <span class="string">&#x27;30&#x27;</span> <span class="keyword">second</span>) <span class="operator">-</span> TO_TIMESTAMP(<span class="string">&#x27;1970-01-01&#x27;</span>, <span class="string">&#x27;YYYY-MM-DD&#x27;</span>) intvl <span class="keyword">from</span> dual);</span><br><span class="line">        expiration :<span class="operator">=</span> to_char(<span class="built_in">CURRENT_TIMESTAMP</span> <span class="operator">+</span> <span class="type">interval</span> <span class="string">&#x27;30&#x27;</span> <span class="keyword">second</span>, <span class="string">&#x27;yyyy-mm-dd&quot;T&quot;HH24:MI:SS&quot;Z&quot;&#x27;</span>);</span><br><span class="line">        apex_json.initialize_clob_output;</span><br><span class="line">        apex_json.open_object;</span><br><span class="line">        apex_json.write(<span class="string">&#x27;expiration&#x27;</span>, expiration);</span><br><span class="line">        apex_json.open_array(<span class="string">&#x27;conditions&#x27;</span>);</span><br><span class="line">        apex_json.open_array;</span><br><span class="line">        apex_json.write(<span class="string">&#x27;starts-with&#x27;</span>);</span><br><span class="line">        apex_json.write(<span class="string">&#x27;$key&#x27;</span>);</span><br><span class="line">        apex_json.write(l_upload_dir);</span><br><span class="line">        </span><br><span class="line">        apex_json.close_array;</span><br><span class="line">        apex_json.close_array;</span><br><span class="line">        apex_json.close_object;</span><br><span class="line">        l_clob :<span class="operator">=</span> apex_json.get_clob_output;</span><br><span class="line">        apex_debug.warn(<span class="string">&#x27;----------starts-with----------&#x27;</span>);</span><br><span class="line">        apex_debug.warn(l_clob);</span><br><span class="line">        apex_json.free_output;</span><br><span class="line">        policy_encode :<span class="operator">=</span> utl_encode.base64_encode(UTL_I18N.STRING_TO_RAW(l_clob, <span class="string">&#x27;AL32UTF8&#x27;</span>));</span><br><span class="line">        policy_vc :<span class="operator">=</span> UTL_I18N.RAW_TO_CHAR(policy_encode, <span class="string">&#x27;AL32UTF8&#x27;</span>);</span><br><span class="line"></span><br><span class="line">        l_mac_secret :<span class="operator">=</span> sys.dbms_crypto.mac(</span><br><span class="line">                src <span class="operator">=</span><span class="operator">&gt;</span> policy_encode,</span><br><span class="line">                key <span class="operator">=</span><span class="operator">&gt;</span> UTL_I18N.STRING_TO_RAW(l_access_key_secret, <span class="string">&#x27;AL32UTF8&#x27;</span>),</span><br><span class="line">                typ <span class="operator">=</span><span class="operator">&gt;</span> sys.dbms_crypto.HMAC_SH1</span><br><span class="line">            );</span><br><span class="line">        sign_result_vc :<span class="operator">=</span> UTL_I18N.RAW_TO_CHAR(utl_encode.base64_encode(l_mac_secret), <span class="string">&#x27;AL32UTF8&#x27;</span>);</span><br><span class="line"><span class="comment">--     todo callback body</span></span><br><span class="line">        apex_json.initialize_clob_output;</span><br><span class="line">        apex_json.open_object;</span><br><span class="line">        apex_json.write(<span class="string">&#x27;callbackUrl&#x27;</span>, l_callback_url);</span><br><span class="line">        apex_json.write(<span class="string">&#x27;callbackBody&#x27;</span>, <span class="string">&#x27;filename=$&#123;object&#125;&amp;size=$&#123;size&#125;&amp;mimeType=$&#123;mimeType&#125;&amp;height=$&#123;imageInfo.height&#125;&amp;width=$&#123;imageInfo.width&#125;&#x27;</span>);</span><br><span class="line">        apex_json.write(<span class="string">&#x27;callbackBodyType&#x27;</span>, <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span>);</span><br><span class="line">        apex_json.close_object;</span><br><span class="line">        l_clob :<span class="operator">=</span> apex_json.get_clob_output;</span><br><span class="line">        apex_json.free_output;</span><br><span class="line">        l_callback_body_vc :<span class="operator">=</span> UTL_I18N.RAW_TO_CHAR(utl_encode.base64_encode(UTL_I18N.STRING_TO_RAW(l_clob, <span class="string">&#x27;AL32UTF8&#x27;</span>)), <span class="string">&#x27;AL32UTF8&#x27;</span>);</span><br><span class="line">    <span class="keyword">end</span>;</span><br><span class="line"><span class="comment">--     todo token body</span></span><br><span class="line"><span class="comment">--apex_json.initialize_clob_output;</span></span><br><span class="line">    apex_json.open_object;</span><br><span class="line">    apex_json.write(<span class="string">&#x27;accessid&#x27;</span>, l_access_key_id);</span><br><span class="line">    apex_json.write(<span class="string">&#x27;host&#x27;</span>, l_host);</span><br><span class="line">    apex_json.write(<span class="string">&#x27;policy&#x27;</span>, policy_vc);</span><br><span class="line">    apex_json.write(<span class="string">&#x27;signature&#x27;</span>, sign_result_vc);</span><br><span class="line">    apex_json.write(<span class="string">&#x27;expire&#x27;</span>, expire); <span class="comment">-- todo 时间戳</span></span><br><span class="line">    apex_json.write(<span class="string">&#x27;dir&#x27;</span>, l_upload_dir);</span><br><span class="line"><span class="comment">-- apex_json.write(&#x27;callback&#x27;, l_callback_body_vc);</span></span><br><span class="line">    apex_json.close_object;</span><br><span class="line">    apex_debug.warn( apex_json.get_clob_output);</span><br><span class="line">    sys.htp.p(apex_json.get_clob_output);</span><br><span class="line"><span class="comment">-- l_clob := apex_json.get_clob_output;</span></span><br><span class="line"><span class="comment">--    apex_json.free_output;</span></span><br><span class="line"><span class="comment">--     sys.DBMS_OUTPUT.PUT_LINE(l_clob);</span></span><br><span class="line"><span class="keyword">end</span>;</span><br></pre></td></tr></table></figure></li>
<li><p>成品</p>
<p> 选择文件(禁用了多选,重命名文件名)<br> <img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/preFfRPRDZbD6JczCBWm.png/jbfffurvdqmpvhukbzbsea"><br> 上传完成<br> <img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/27Wp3fbXwQENGFJsNFz7.png/jbfffurvdqmpvhukbzbsea"></p>
</li>
</ol>

        </article>
        <section class="post-near">
            <ul>
                
                    <li>上一篇: <a href="/2022/05/01/0586406b1d50/">不同衣物收纳教程</a></li>
                
                
                    <li>下一篇: <a href="/2021/12/13/3449662a057f/">Oracle Apex IR 多选批量处理后页面局部刷新</a></li>
                
            </ul>
        </section>
        
            <section class="post-tags">
            <a class="-none-link" href="/tags/Apex/" rel="tag">Apex</a><a class="-none-link" href="/tags/OSS/" rel="tag">OSS</a><a class="-none-link" href="/tags/%E5%85%83%E5%AE%87%E5%AE%99/" rel="tag">元宇宙</a><a class="-none-link" href="/tags/%E9%98%BF%E9%87%8C%E4%BA%91/" rel="tag">阿里云</a>
            </section>
        
    
        <section class="post-author">
        
            <figure class="author-avatar">
                <!-- <img src="https://metaverse-1256174970.cos.ap-shanghai.myqcloud.com/image_%2Fahmed-mulla-hS-2bYjeyWc-unsplash.jpg" alt="Pan" /> -->
                <img src="https://nuczmjfhvndrjhrfpqkcyeimmdrcsebw.oss-cn-shanghai.aliyuncs.com/jbfffurvdqmpvhukbzbsea/QPWp3GjspHEz8QHi6RDm.jpeg" alt="Pan" >
            </figure>
        
            <div class="author-info">
                <h4>Pan</h4>
                <p>社会主义螺丝钉,币圈韭菜,A股韭菜</p>
            </div>
        </section>
    
    </div>
</main>

    <footer>
    <div class="buttons">
        <a class="to-top" href="#"></a>
    </div>
    <div class="wrap min">
        <section class="widget">
            <div class="row">
                <div class="col-m-4">
                    <h3 class="title-recent">最新文章：</h3>
                    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2022/05/01/0586406b1d50/">不同衣物收纳教程</a></li><li class="post-list-item"><a class="post-list-link" href="/2022/01/13/6578eb87a21b/">Apex直传阿里云OSS</a></li><li class="post-list-item"><a class="post-list-link" href="/2021/12/13/3449662a057f/">Oracle Apex IR 多选批量处理后页面局部刷新</a></li><li class="post-list-item"><a class="post-list-link" href="/2021/11/05/60190b5049e6/">Apex上传文件至Windows网盘</a></li><li class="post-list-item"><a class="post-list-link" href="/2021/11/05/b209999e9b35/">Apex对接钉钉免登</a></li><li class="post-list-item"><a class="post-list-link" href="/2021/11/05/e7f888284497/">Oracle AES加解密Demo</a></li></ul>
                </div>
                <div class="col-m-4">
                    <h3 class="title-date">时光机：</h3>
                    <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/05/">五月 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/01/">一月 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/12/">十二月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/11/">十一月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">六月 2020</a></li></ul>
                </div>
                <div class="col-m-4">
                    <h3 class="title-tags">标签云：</h3>
                    <a href="/tags/AES/" style="font-size: 10px;">AES</a> <a href="/tags/Apex/" style="font-size: 16.67px;">Apex</a> <a href="/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/tags/HTML/" style="font-size: 10px;">HTML</a> <a href="/tags/JS/" style="font-size: 10px;">JS</a> <a href="/tags/Nginx/" style="font-size: 10px;">Nginx</a> <a href="/tags/OSS/" style="font-size: 10px;">OSS</a> <a href="/tags/Oracle/" style="font-size: 13.33px;">Oracle</a> <a href="/tags/Ords/" style="font-size: 10px;">Ords</a> <a href="/tags/PL-SQL/" style="font-size: 10px;">PL/SQL</a> <a href="/tags/SQLcl/" style="font-size: 10px;">SQLcl</a> <a href="/tags/Tomcat/" style="font-size: 10px;">Tomcat</a> <a href="/tags/Windows/" style="font-size: 10px;">Windows</a> <a href="/tags/%E5%85%83%E5%AE%87%E5%AE%99/" style="font-size: 20px;">元宇宙</a> <a href="/tags/%E5%A4%9C%E8%AF%BB/" style="font-size: 13.33px;">夜读</a> <a href="/tags/%E6%9D%82%E9%A1%B9/" style="font-size: 10px;">杂项</a> <a href="/tags/%E7%BD%91%E7%9B%98/" style="font-size: 10px;">网盘</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 13.33px;">转载</a> <a href="/tags/%E9%92%89%E9%92%89/" style="font-size: 10px;">钉钉</a> <a href="/tags/%E9%98%BF%E9%87%8C%E4%BA%91/" style="font-size: 10px;">阿里云</a>
                </div>
            </div>
        </section>
        <section class="sub-footer">
            <p>友链:<a href="https://wangfanggang.com/" target="_blank">钢钢更新</a></p>
            <p><span>用于分享个人成长经历,日常状况.心情感悟,分享Apex开发经验,Python开发经验,Go等一系列学习笔记.作为网络知识储备.也会记录一些网络金句</span></p>
            <p>© 2022 
                <a href="/">我的元宇宙</a>. All Rights Reserved. Theme By 
                <a href="https://github.com/Dreamer-Paul/Hingle" target="_blank" rel="nofollow">Hingle</a>.
                <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/">豫ICP备19030991号</a></p>
        </section>
    </div>
    
</footer>


<script src="/static/kico.js"></script>
<script src="/static/hingle.js"></script>


<script>var hingle = new Paul_Hingle({"copyright":true,"night":true});</script>

  </body>
</html>
